<html>
  <head>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      .container {
        height: auto;
        min-height: 100%;
        display: grid;
        grid-template-columns: 1fr 3fr;
        grid-template-rows: 200px auto 200px;
      }
      .header {
        grid-column: 1/3;
        grid-row: 1/1;
        background: rgb(237, 252, 224);
      }
      .left-side {
        grid-column: 1/1;
        grid-row: 2/2;
        background: rgb(222, 255, 224);

        display: flex;
      }
      .content {
        grid-column: 2/2;
        grid-row: 2/2;
        background: rgb(247, 222, 253);
        display: flex;
      }
      .footer {
        grid-column: 1/3;
        grid-row: 3;
        background: rgb(156, 219, 235);
      }
      .items {
        display: flex;
        flex-direction: column;
        flex: 1;
      }
      .item {
        flex: 1;
      }
      .content-area {
        margin: 20px;
        background: rgb(186, 190, 245);

        flex: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">this is header</div>
      <div class="left-side">
        <div class="items">
          <div class="item">Menu A</div>
          <div class="item">Menu A</div>
          <div class="item">Menu A</div>
          <div class="item">Menu A</div>
          <div class="item">Menu A</div>
        </div>
      </div>
      <div class="content">
        <div class="content-area">this is content</div>
      </div>
      <div class="footer">this is footer</div>
    </div>
  </body>
</html>
